<template>
  <el-dialog
    v-model="computedDialogVisible"
    title="添加插件"
    width="500"
    :before-close="handleClose"
  >
    <div>123123123</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel()">取消</el-button>
        <el-button type="primary" @click="handleComfirm()">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, unref, reactive, defineProps, defineEmits, computed, toRefs } from 'vue'
import {
  ElRow,
  ElCol,
  ElSkeleton,
  ElCard,
  ElDivider,
  ElLink,
  ElButton,
  ElDialog
} from 'element-plus'
const emit = defineEmits(['update:dialogVisible'])

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  dialogVisible: {
    type: Boolean,
    default: false
  }
})

const { dialogVisible } = toRefs(props)

const computedDialogVisible = computed({
  get() {
    return dialogVisible.value
  },
  set(value) {
    emit('update:dialogVisible', value)
  }
})

function handleClose() {
  emit('update:dialogVisible', false)
}

function handleCancel() {
  emit('update:dialogVisible', false)
}

function handleComfirm() {
  emit('update:dialogVisible', false)
}
</script>

<style lang="less" scoped></style>
